<style lang='scss'>
	.img-uploader{
		.el-upload {
			border: 1px dashed #d9d9d9;
		}
		.el-upload {
			&, div {
				height: 100%;
			}
		}
		&.selected .el-upload {
			border-color: #729AEA;
		}
		&.error .el-upload {
			border-color: #EF5555;
		}
		.img-uploader-icon, .img-preview {
			width: 150px;
			height: 150px;
			line-height: 150px;
		}
		.img-uploader-icon {
			position: relative;
		}
		.type-remind-text {
			position: absolute;
	    top: 58%;
	    text-align: center;
	    width: 100%;
	    left: 0;
	    line-height: 20px;
	    font-size: 10px;
		}
	}
</style>
<template>
	<el-upload
	  :class="'img-uploader'+(error_info?' error':preview_url&&file_obj?' selected':'')"
	  action=""
	  :auto-upload="false"
	  :show-file-list="false"
	  :on-change="fileChange">
	  <div v-if="preview_url" v-loading="preview_img_loading">
	  	<img :src="preview_url" class="img-preview" :style="img_style" @load="previewImgLoaded" @error="previewImgLoaded">
	  </div>
	  <i v-else class="el-icon-plus img-uploader-icon" :style="img_style">
	  	<p class="type-remind-text tt-l3" v-if="show_limit_text && limit_text">{{limit_text}}</p>
	  </i>
	</el-upload>
</template>
<script>
	export default {
		props: {
			file_data: {
				default: ''
			},
			type_limit: {
				default: 'png'
			},
			width: {
				default: '150'
			},
			height: {
				default: ''
			},
			show_limit_text: {
				default: true
			},
			size_limit: {
				type: Number,
				default: 500
			}
		},
		data() {
			return {
				file_obj: '',
				file_error: '',
				error_info: '',
				init_load_res: '',
				preview_img_loading: false
			}
		},
		computed: {
			img_style() {
				let height = this.height == '' ? this.width : this.height;
				return 'width:'+this.width+'px;height:'+height+'px;line-height:'+height+'px;';
			},
			size_limit_text() {
				var limit = this.size_limit;
				return limit ? (limit > 1024 ? limit/1024+'M' : limit+'Kb') : '';
			},
			limit_text() {
				var temp = this.type_limit;
				return temp ? '.'+(temp.join ? temp.join(' .') : temp): '';
			},
			preview_url() {
				let file_data = this.file_data, res = '';
				if(file_data) {
					res = typeof file_data == 'string' ? this.init_load_res === false ? '' : file_data : URL.createObjectURL(file_data);
				}
				if(res && (typeof file_data == 'string' && !this.init_load_res || typeof file_data != 'string')) this.preview_img_loading = true;
				return res;
			}
		},
		watch: {
			file_obj(val) {
				this.$emit('update:file_data', val);
			},
			file_data(val) {
				if(!val) {
					this.file_obj = '';
					this.file_error = '';
				}
			}
		},
		methods: {
			previewImgLoaded(event) {
				if(this.init_load_res === '') {
					this.init_load_res = event.type == 'error' ? false : true;
				}
				this.preview_img_loading = false;
			},
			fileChange(file) {
				let file_obj = file.raw;

				var file_type = file_obj.type;
				file_type = file_type.substr(file_type.indexOf('/') + 1);

				let error = !file_obj?'文件为空，请重新上传':!(~this.type_limit.indexOf(file_type))?'只能上传'+this.limit_text+'类型文件':this.size_limit&&(file_obj.size / 1024>this.size_limit)?'文件大小不能超过'+this.size_limit_text:'';
				if(error) {
					this.file_obj = '';
					this.$message.error(error);
					this.file_error = error;
				}else {
					this.file_obj = file_obj;
				}
			}
		}
	}
</script>